<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>用户最近登录统计</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="${ctx}/rs/css/bootstrap.min.css" />
<link rel="stylesheet" href="${ctx}/rs/css/bootstrap-table.css" />
<link href="${ctx}/rs/css/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${ctx}/rs/css/examples.css" />
<script src="${ctx}/rs/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
<script src="${ctx}/rs/js/bootstrap.min.js"></script>
<script src="${ctx}/rs/js/bootstrap-table.js"></script>
<script src="${ctx}/rs/js/bootstrap-table-zh-CN.js"></script>
<script src="${ctx}/rs/js/jquery.formatDate.js"></script>
<script src="${ctx}/rs/js/my97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/rs/js/session-out-error.js"></script>
</head>
<body>
	<div class="title"><img src="${ctx}/rs/images/mapicon.png" class="mapicon"/><strong>位置：&nbsp;</strong>&nbsp;用户管理<img src="${ctx}/rs/images/pointer.gif" class="pointer"/>用户最近登录统计</div>
	<div class="main-cont">
		<div id="toolbar">
		    <label class="regnum">最近活跃用户数：<b id="userNumber" class="col_red">0</b>&nbsp;个</label> 
		    <div class="fr pb10">
		                手机号码：
    		   <input id="phone" class="srt-put1 mr10 widput1"/>
    		       昵称/姓名：
    		   <input id="name" class="srt-put1 mr10 widput1" />
    	                起止时间：
    	       <input type="text" onclick="WdatePicker()" class="srt-put1 Wdate2" id="startDate" name="startDate"   
                onFocus="var endDate=$dp.$('endDate');WdatePicker({onpicked:function(){endDate.focus();},dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endDate\')}'})"/> 
                                        至
               <input type="text" onclick="WdatePicker()" class="srt-put1 Wdate2" id="endDate" name="endDate"  
                onFocus="WdatePicker({minDate:'#F{$dp.$D(\'startDate\')}',dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
			   <button class="btn btn-primary btn-sm srt-btn active" onclick="refresh()">搜索</button>
		    </div>
		</div>
		<table id="table" cellpadding="0" cellspacing="0" data-toggle="table" data-toolbar="#toolbar"
			data-url="${ctx}/user/login/page.htm"
			data-cache="false"
			data-pagination="true" 
			data-side-pagination="server"
			data-page-list="[10, 20, 50, 100]"
			data-page-size="20"  
			data-query-params="queryParams">
			<thead>
				<tr class="tab-th">
					<th data-field="id">编号</th>
					<th data-field="phone">手机号码</th>
					<th data-field="nickName">昵称</th>
					<th data-field="name">姓名</th>
					<th data-field="sex" data-formatter="sexFormatter">性别</th>
					<th data-field="birthday" data-formatter="birthdayFormatter">生日</th>
					<th class="col-md-3" data-field="address">地址</th>
					<th data-field="lastTime" data-formatter="timeFormatter">登陆时间</th>
				</tr>
			</thead>
		</table>
	</div>
	<script>
	    var $table = $('#table');
	    $table.on('load-success.bs.table', function (e, name, args) {
//             console.log(eval(name).total);
            $("#userNumber").text(eval(name).total);
        });
	    $table.bootstrapTable({
            height: getHeight()
        });
	    
        //获取分辨率高度
	    function getHeight() {
	        return window.screen.height - 308;
	    }
	    
	    $(window).resize(function () {
        	$table.bootstrapTable('resetView',{height: getHeight()});
        });
	    
	    //初始化刷新
	    function refresh(){
	    	var phone = $("#phone").val();
			var name = $("#name").val();
			var startDate = $("#startDate").val();
			var endDate = $("#endDate").val();
			var pageSize = $table.bootstrapTable('getOptions').pageSize;
	    	$table.bootstrapTable('refresh', {
	    		silent: true,
	    		cache : false,
                url: '${ctx}/user/login/page.htm',
                query: {
                	startDate:startDate,
    				endDate:endDate,
    				phone :phone,
    				name :name,
    				pageIndex : 0,
    				pageSize : pageSize
    			}
            });
	    }
	    
		function queryParams(params) {
			var phone = $("#phone").val();
			var name = $("#name").val();
			var startDate = $("#startDate").val();
			var endDate = $("#endDate").val();
			return {
				startDate:startDate,
				endDate:endDate,
				phone :phone,
				name :name,
				pageIndex : params.offset,
				pageSize : params.limit
			};
		}
		
		var genders = [{ id: 0, text: '男' }, { id: 1, text: '女'}, { id:-1 ,text :'不详'}];
        function sexFormatter(value, row, index){
        	for (var i = 0, l = genders.length; i < l; i++) {
        		var gender = genders[i];
                if (gender.id == value) 
                 return gender.text;
            }
			 return "--";
		}
        
        function birthdayFormatter(value, row, index){
			 if(value){
				 return $.formatDate("yyyy-MM-dd", new Date(value));
			 }
			 return "--";
		}
        
		function timeFormatter(value, row, index){
			 if(value){
				 return $.formatDate("yyyy-MM-dd HH:mm:ss", new Date(value));
			 }
			 return "--";
		}

	</script>
</body>
</html>